<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 2 模拟API调用 - v-show控制加载状态</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>用户信息加载示例（Vue 2）</h2>

        <!-- 按钮：点击触发数据加载 -->
        <button @click="fetchUserData">加载用户数据</button>

        <br><br>

        <!-- 加载中提示 - 用 v-show 控制显示 -->
        <div v-show="isLoading">
            ⏳ 正在加载用户数据，请稍候...
        </div>

        <!-- 加载完成后的数据内容 - 用 v-show 控制显示 -->
        <div v-show="isLoaded && !isLoading">
            ✅ 用户数据加载完成！<br><br>
            用户名：{{ userData.name }}<br>
            邮箱：{{ userData.email }}<br>
            年龄：{{ userData.age }}<br>
            注册时间：{{ userData.registeredAt }}
        </div>

        <!-- 如果未开始加载，显示提示 -->
        <div v-show="!isLoading && !isLoaded">
            👆 点击上方按钮加载用户信息
        </div>
    </div>

    <script>
        // Vue 2 实例（Options API）
        new Vue({
            el: '#app',
            data: {
                isLoading: false,     // 是否正在加载
                isLoaded: false,      // 是否已加载完成
                userData: {}          // 存储用户数据
            },
            methods: {
                fetchUserData: function () {
                    // 重置状态
                    this.isLoading = true;
                    this.isLoaded = false;
                    this.userData = {};

                    // 模拟异步请求（2秒后返回数据）
                    var self = this;
                    setTimeout(function () {
                        // 模拟返回的用户数据
                        var mockData = {
                            name: '李四',
                            email: 'lisi@example.com',
                            age: 32,
                            registeredAt: '2022-06-20 14:22:00'
                        };

                        // 更新数据
                        self.userData = mockData;
                        self.isLoading = false;   // 加载完成
                        self.isLoaded = true;     // 数据就绪
                    }, 2000); // 2秒延迟模拟网络请求
                }
            }
        });
    </script>
</body>

</html>